<template>
    <div>
            <Card>
                <p slot="title">
				    新增角色
			    </p>
                <div>
                    <Form class="step-form" ref="role" :model="role" :rules="roleRules" :label-width="100">
                        <Row>
                            <i-col span="12">
                                <FormItem label="角色名称：" prop="rolename">
                                    <Input :disabled="hasSubmit" v-model="role.rolename" clearable  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色名称" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="12">
                                <FormItem label="角色编码：" prop="rolecode">
                                    <Input :disabled="hasSubmit" v-model="role.rolecode" clearable  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色编码" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="12">
                                <FormItem label="备注：" prop="roleremark">
                                    <Input :disabled="hasSubmit" v-model="role.roleremark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注信息" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <FormItem label="">
                            <Button :disabled="hasSubmit" @click="handleSubmit" style="width:100px;" type="primary">提交</Button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button :disabled="hasSubmit" @click="goPreviousPage" style="width:100px;" >返回</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addrole',
    data () {
        return {
            role: {
                rolename: '',      // 用户名称
                rolecode: '',      // 用户编码
                roleremark: '',    // 备注说明
            },
            // 校验
            roleRules: {
                rolename: [
                    { required: true, message: '角色名称不能为空', trigger: 'blur' },
                    {type: 'string', max: 10, message: '不能超过10个字符', trigger: 'blur'}
                ],
                rolecode: [
                    { required: true, message: '角色代码不能为空', trigger: 'blur' },
                    {type: 'string', max: 10, message: '不能超过10个字符', trigger: 'blur'}
                ],
                roleremark: [
                    { required: true, message: '备注不能为空', trigger: 'blur' },
                    {type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur'}
                ]
            },
            hasSubmit: false,
        }
    },
    created() {
        this.$store.commit('setActiveName', 'setroleindex');
    },
    methods: {
        // 提交按钮
        handleSubmit () {
            this.$refs['role'].validate((valid) => {
                if (valid) {
                    this.hasSubmit = true
                    let url = 'adminlogin/role/addCjRole'
                    let data = {
                        rolename: this.role.rolename,
                        rolecode: this.role.rolecode,
                        remark: this.role.roleremark
                    }
                    ajax.formRes(url, data).then(res => {
                        // success
                        this.$Message.success('新增角色成功,页面正在跳转')
                        let vm = this
                        setTimeout(function () {
                            vm.$router.push({
                                name: 'setroleindex'
                            })
                        }, 1500)
                        this.hasSubmit = false
                        this.role = {}
                    }).catch(res => {
                        console.log('有错误信息')
                    })
                }
            })
        },
        // 返回按钮
        goPreviousPage () {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less">
    @import '../../../styles/common.less';
</style>
